<template>
  <!--  用户列表-->
  <div class="page">
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">添加账号</el-button>
      <el-button icon="el-icon-plus" @click.stop="handleAddOrg" class="common_btn-small">添加组织机构</el-button>
      <el-button icon="el-icon-plus" @click.stop="handleImport" class="common_btn-small">批量导入</el-button>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync=" isShowUserDialog "
      :before-close="clearValidate"
      width="600px">
<!--      批量导入-->

      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :model="currentRow" label-width="90px" class="form_width-200">
        <el-form-item label="userId" prop="id">
          <el-input
            v-model.trim="userRow.id"
            placeholder="输入userId"
            class="init_input-limit"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="loginName">
          <el-input
            class="init_input-limit"
            v-model.trim="userRow.loginName"
            placeholder="账号"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input
            class="init_input-limit"
            v-model.trim="userRow.userName"
            placeholder="输入姓名"
            show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="密文密码" prop="otherPass">
          <el-input
            class="init_input-limit"
            v-model.trim="userRow.otherPass"
            placeholder="输入密文密码"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="组织机构id" prop="organizationId">
          <el-input
            class="init_input-limit"
            v-model.trim="userRow.organizationId"
            placeholder="输入组织机构id"
            show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="phone" prop="organizationId">
          <el-input
            class="init_input-limit"
            v-model.trim="userRow.phone"
            placeholder="输入phone(非必填)"
            show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitUser">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title=" 批量导入" :visible.sync="showImport"  width="520px">
      <el-form ref="newUploadForm" label-width="80px"
               label-position="right">
                  <el-row>
                    <el-col :span="18">
                      <el-form-item label="上传文件" prop="fileName">
                        <el-input v-model="fileName" :readonly='true' placeholder="文件名" style="width:250px;"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList"
                                 :before-upload="beforeUpload">
                        <el-button slot="trigger" type="primary" plain style="color:white;background:#1990FE">选择导入文件
                        </el-button>
                      </el-upload>
                    </el-col>
                  </el-row>
        <el-row>
          <el-button icon="el-icon-download" @click.stop="handleOutFile" size="mini" type="primary"
                     style="background:#1990FE ">导入模板下载
          </el-button>
        </el-row>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateFormFile">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="isShowOrgDialog"
      :before-close="clearValidate"
      width="600px">

      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :model="currentRow" label-width="90px" class="form_width-200">
        <el-form-item label="组织机构id" prop="id">
          <el-input
            v-model.trim="orgRow.id"
            placeholder="输入组织机构id"
            class="init_input-limit"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="parentId" prop="parentId">
          <el-input
            class="init_input-limit"
            v-model.trim="orgRow.parentId"
            placeholder="parentId"
            maxlength="11"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="组织机构名" prop="name">
          <el-input
            class="init_input-limit"
            v-model.trim="orgRow.name"
            placeholder="输入组织机构名"
            maxlength="20"
            show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitOrg">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {accountImport, orgImport,importUserExcel} from '@/services/model/authority-mgmt'
  // 初始的搜索参数
  const INIT_PARAMS = {
    phone: '',
    name: '',
    username: '',
    email: '',
    proxyCode: ''
  }

  export default {
    components: {},
    data() {
      return {
        fileList: [],

        newUploadForm: {
          fileName: '',
          pipeInfoId: '',
        },
        fileName: '',

        userRow: {},
        currentRow: {},
        showImport:false,
        isShowUserDialog: false,
        orgRow: {},
        isShowOrgDialog: false,
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return '新增'
      },


    },
    filters: {},
    methods: {
      cancleSub() { // 取消上传
        this.showImport = false
        this.fileName = ''
        this.newUploadForm = {}
      },
      handleOutFile() { // 文件导出
        const {href} = this.$router.resolve({path: '/statics/公路局新建用户.xlsx'})
        window.open(href)
      },
      validateFormFile() {
        if (this.fileName === '') {
          this.$message({
            message: '请选择要上传的文件！',
            type: 'warning',
            showClose: true
          })
          return false
        }
        this.isLoading = true
        let fileFormData = new FormData()
        fileFormData.append('uploadFile', this.files, this.fileName) // 上传的文件
        importUserExcel(fileFormData).then(res => { // 上传请求
          if (res.code === 200) {
            this.fileName = ''
            this.showImport = false
            this.$notify({
              type: 'success',
              title: '提示',
              message: '导入成功'
            })
            this.queryList()
          }
        })
        this.isLoading = false
      },
      // 上传文件
      beforeUpload(file) { // 上传前 文件校验
        this.files = file
        this.fileName = file.name
        return false // 返回false不会自动上传
      },
      //批量导入
      handleImport() {
        this.newUploadForm = {}
        this.showImport = true
        this.$nextTick(() => {
          this.$refs.newUploadForm.clearValidate()
        })
      },
      handleAddOrg() {
        this.userRow = {};
        this.isShowOrgDialog = true;
      },
      handleAdd() {
        this.orgRow = {};
        this.isShowUserDialog = true;
      },
      async submitUser() {
        let res = await accountImport(this.userRow)
        if (res.code === 200) {
          this.isShowUserDialog = false;
          this.$message.success('成功')
        } else this.$message.error(res.message)

      },
      async submitOrg() {
        let res = await orgImport(this.orgRow)
        if (res.code === 200) {
          this.isShowOrgDialog = false;
          this.$message.success('成功')
        } else this.$message.error(res.message)

      },
      clearValidate() {
        this.isShowUserDialog = false;
        this.isShowOrgDialog = false;
      }
    },
    mounted() {

    },
    activated() {
    }
  }
</script>
<style lang="less" scoped>
  .user_status {
    &::before {
      content: '';
      margin-right: 6px;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #969997;
    }

    &.active::before {
      background-color: #0DC26B;
    }
  }

  /deep/ .relate_checkbox {
    .el-checkbox {
      margin-bottom: 30px;

      .el-checkbox__label {
        width: 100px;
      }
    }
  }

  /deep/ .dialog_area {
    .el-dialog__header {
      padding-bottom: 0;
    }
  }

  .area_filter {
    .el-select {
      margin-right: 10px;
    }
  }

  .area_choose {
    display: flex;
    margin-top: 30px;

    .choose_left {
      flex-shrink: 0;
      width: 330px;
      border-right: 1px solid #E4E7ED;
      padding-right: 30px;
    }

    .choose_right {
      padding-left: 30px;
      flex-shrink: 0;
      width: 330px;
    }

    .choose_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #EBEEF5;

      span {
        color: #303133;
        font-weight: bold;
        font-family: PingFangSC-Medium, PingFang SC;
      }

      .top_right {
        color: #606266;

        &.el-button {
          padding: 0;
        }
      }
    }
  }

  .choose_ul {
    padding-top: 16px;
    height: 100%;

    .choose_li {
      cursor: pointer;
      padding: 0 12px 0 9px;
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      em {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #303133;

        .el-icon-check {
          color: #0DC26B;
          margin-right: 5px;
        }
      }

      i {
        font-size: 15px;
      }

      .el-icon-circle-plus-outline {
        display: none;
        color: #0DC26B;
      }

      .el-icon-circle-close {
        display: none;
        color: #F56C6B;
      }

      &:hover {
        background-color: #F2F6FC;

        i {
          display: block;
        }
      }

      &.disable {
        em {
          color: #C0C4CC;
        }

        .el-icon-circle-plus-outline {
          display: none !important;
        }
      }
    }
  }

  .margin_l-16 {
    margin-left: 16px;
  }

  .init_input-limit /deep/ input {
    padding-right: 45px;
  }

  .item_tag {
    margin-left: 6px;

    &:first-child {
      margin-left: 0;
    }
  }
</style>
